<template>
  <view
    v-if="shenheStatus == 0"
    class="singIn"
    :style="'background-image: url(' + asyncImgs.integral.qiandao_bg + ');'"
  >
    <view class="head">
      <view class="signBox">
        <view class="signBtn">
          <text class="signed" v-if="signInfo.today == 1">已打卡</text>
          <view class="toSign" @click="toSignIn" v-else>
            <text>0:00-24:00</text>
            <text>来打卡喔</text>
          </view>
        </view>
      </view>
      <!-- <view class="notice">
        <text class="iconfont icon-remind-fill"></text>
        <text>设置提醒</text>
      </view> -->
      <view class="tip"
        >今日签到获得<span
          >{{ signInfo.setting.register_integral }}～{{
            signInfo.setting.register_integral_end
          }}</span
        >积分，连续签到有惊喜哦~</view
      >
    </view>
    <view class="punch">
      <view class="title">
        <view>
          <image :src="asyncImgs.signIn.notice"></image>
          <u-notice-bar
            :list="signInfo.account_log"
            class="notice"
            :volumeIcon="false"
            color="#8c8c8c"
            mode="vertical"
            bgColor="#dffce6"
          ></u-notice-bar>
          <!-- <text>下单购买商品即可完成补卡</text> -->
        </view>
        <!-- <text class="iconfont icon-arrow-right"></text> -->
      </view>
      <view class="punchBox">
        <image :src="asyncImgs.signIn.tip" class="icon"></image>
        <image :src="asyncImgs.signIn.tip" class="icon"></image>
        <view class="days" v-if="signInfo.registerTime">
          <view class="dayList">
            <text class="line"></text>
            <view
              class="day"
              v-for="(item, index) in signInfo.registerTime"
              :key="index"
            >
              <view class="pic">
                <image
                  :src="asyncImgs.signIn.sign"
                  v-if="item.is_register == 0"
                ></image>
                <image :src="asyncImgs.signIn.signed" v-else></image>
              </view>
              <text v-if="item.register_time == currentDay">今天</text>
              <text v-else>第{{ index + 1 }}天</text>
            </view>
          </view>
        </view>
        <view class="count">
          <view class="countItem">
            <view class="dayCount">
              <text>{{ signInfo.register || 0 }}</text>
              <text>天</text>
            </view>
            <text>连续天数</text>
          </view>
          <view class="countItem">
            <view class="dayCount">
              <text>{{ signInfo.total_register_day || 0 }}</text>
              <text>天</text>
            </view>
            <text>累计天数</text>
          </view>
        </view>
      </view>
    </view>
    <view class="rules">
      <view class="title">
        <image :src="asyncImgs.signIn.title"></image>
        <text>活动规则</text>
        <image :src="asyncImgs.signIn.title"></image>
      </view>
      <view class="rulesBox" v-if="signInfo.setting">
        <image class="icon" :src="asyncImgs.signIn.rules"></image>
        <view class="name">· 签到打卡积分规则</view>
        <view
          class="rulesContent"
          v-html="signInfo.setting.register_rule"
        ></view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      // 签到信息
      signInfo: {},
      text1: ["1", "2"],
    };
  },
  methods: {
    // 获取签到记录
    async signIndex() {
      const res = await this.$allrequest.integral.signIndex();
      if (res.code == 0) {
        this.signInfo = res.data;
      }
    },
    // 点击签到
    async toSignIn() {
      const res = await this.$allrequest.integral.signIn();
      if (res.code == 0) {
        this.signIndex();
      }
    },
  },
  mounted() {
    this.signIndex();
  },
  computed: {
    currentDay() {
      var myDate = new Date();
      let year = myDate.getFullYear();
      let month = myDate.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      let day = myDate.getDate();
      day = day < 10 ? "0" + day : day;
      return year + "-" + month + "-" + day;
    },
  },
};
</script>

<style lang="less" scoped>
.singIn {
  min-height: 100vh;
  font-family: PingFang SC;
  background-color: #2cb27f;
  padding-bottom: 50rpx;
  background-size: 100% auto;
  background-repeat: no-repeat;
  .head {
    position: relative;
    padding-top: 34rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .signBox {
      width: 224rpx;
      height: 224rpx;
      border: 6rpx solid rgba(0, 0, 0, 0.05);
      border-radius: 50%;
      .signBtn {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(145deg, #35d27f 0%, #28a75c 100%);
        border: 6rpx solid #28a75c;
        .toSign {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text:nth-child(1) {
            font-size: 30rpx;
            color: #fff;
          }
          text:nth-child(2) {
            font-size: 24rpx;
            color: #fff;
            opacity: 0.6;
          }
        }
        .signed {
          display: block;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 48rpx;
          color: #fff;
          opacity: 0.6;
        }
      }
    }
    .notice {
      position: absolute;
      top: 108rpx;
      right: 0;
      display: flex;
      align-items: center;
      padding: 10rpx 20rpx;
      border-radius: 99rpx 0 0 99rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #2ab24b;
      background: #fff;
    }
    .tip {
      margin-top: 24rpx;
      text-align: center;
      font-size: 32rpx;
      color: #8c8c8c;
      span {
        color: #fa980e;
      }
    }
  }
  .punch {
    margin-top: 128rpx;
    padding: 0 24rpx;
    .title {
      width: 100%;
      height: 80rpx;
      background-color: #dffce6;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      justify-content: space-between;
      view {
        width: 90%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #8c8c8c;
        image {
          width: 53rpx;
          min-width: 53rpx;
          height: 34rpx;
        }
        .notice {
          flex: auto;
        }
      }
      .iconfont {
        font-size: 20rpx;
        color: #cdcdcd;
      }
    }
    .punchBox {
      width: 100%;
      margin-top: 20rpx;
      background-color: #fcffee;
      border-radius: 20rpx;
      position: relative;
      .days {
        height: 150rpx;
        padding: 26rpx 48rpx 0 48rpx;
        border-radius: 20rpx;
        box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.05);
        .dayList {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .line {
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: #f0f0f0;
            top: 30rpx;
            left: 0;
          }
          .day {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 22rpx;
            color: #8c8c8c;
            .pic {
              width: 60rpx;
              height: 60rpx;
              border-radius: 50%;
              border-radius: 1px solid #f0f0f0;
              background: #fff;
              z-index: 10;
              border: 1px solid #f0f0f0;
              padding: 10rpx;
              image {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
      .count {
        display: flex;
        align-items: center;
        height: 190rpx;
        justify-content: space-around;
        .countItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 28rpx;
          color: #8c8c8c;
          .dayCount {
            display: flex;
            align-items: baseline;
            text:nth-child(1) {
              font-size: 60rpx;
              font-weight: 600;
              color: #262626;
              margin-right: 8rpx;
            }
            text:nth-child(2) {
              font-size: 24rpx;
            }
          }
        }
      }
      .icon {
        width: 20rpx;
        height: 36rpx;
        position: absolute;
        top: -18rpx;
      }
      .icon:nth-child(1) {
        left: 42rpx;
      }
      .icon:nth-child(2) {
        right: 42rpx;
      }
    }
  }
  .rules {
    margin-top: 40rpx;
    padding: 0 24rpx;
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 30rpx;
        height: 7rpx;
      }
      text {
        font-size: 36rpx;
        color: #fff;
        font-weight: 600;
        margin: 0 10rpx;
      }
    }
    .rulesBox {
      position: relative;
      margin-top: 34rpx;
      display: flex;
      flex-direction: column;
      border-radius: 20rpx;
      padding: 30rpx 24rpx;
      background-color: #fff;
      .name {
        font-size: 30rpx;
        font-weight: 600;
        color: #262626;
        margin-bottom: 30rpx;
      }
      .item {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 30rpx;
      }
      .icon {
        width: 750rpx;
        height: 124rpx;
        position: absolute;
        top: -124rpx;
        left: -24rpx;
      }
    }
  }
}
</style>
